<template>
  <div class="w750">
    <!-- 头部 -->
    <header>
      <div class="header-box">
        <div class="header-back" @click="goback">
          <span class="back-img"><img src="../../assets/images/back.png" alt=""></span>
        </div>
        <div class="header-search">
          <p class="ser-txt">提交订单</p>
        </div>
        <div class="header-mes"><a href="#" class="mes-img"></a></div>
      </div>
    </header>
    <!-- /头部 -->

    <div :class="themes.theme">
    <!-- 提交订单 -->
    <div class="submit-order">
      <div class="order-address" v-if="result.userAddress" @click="goAddress">
        <div class="user-info">
          <img :src="`../../assets/style-images/sub-local-${themes.theme}.png`" alt="">
          <em class="item">{{result.userAddress.receiver}}</em><em class="item">{{result.userAddress.mobile}}</em>
        </div>
        <div class="address-det">{{result.userAddress.province}} {{result.userAddress.city}} {{result.userAddress.area}} {{result.userAddress.subAdds}}</div>
        <i class="arr"><img src="../../assets/images/arrow.png" alt=""></i>
      </div>
      <div class="order-address" v-if="!result.userAddress" @click="goAddress">
        <div class="user-info">
          <img :src="require(`../../assets/style-images/sub-local-${themes.theme}.png`)" alt="">
          <em class="item">请添加收货地址</em><em class="item"></em>
        </div>
        <div class="address-det"></div>
        <i class="arr"><img src="../../assets/images/arrow.png" alt=""></i>
      </div>
      <!--<div class="pick-self mt10">-->
      <!--<div class="order-style">-->
      <!--<span class="left">提货人</span>-->
      <!--<span class="right"><input type="text" placeholder="请输入提货人"></span>-->
      <!--</div>-->
      <!--<div class="order-style bt">-->
      <!--<span class="left">联系电话</span>-->
      <!--<span class="right"><input type="text" placeholder="请输入联系电话"></span>-->
      <!--</div>-->
      <!--</div>-->
      <div class="submit-list">
        <div class="submit-con" v-for="(shop,shopIndex) in result.shopCarts" :key="shopIndex">
          <div class="submit-tit">
            <a href="javascript:;" class="shop-mes"><i class="shop-icon"><img src="../../assets/images/shopicon.png" alt=""></i><span class="shop-name">{{shop.shopName}}</span></a>
          </div>
          <div v-for="(type,typeIndex) in shop.groupCartItems" :key="typeIndex">
            <div class="pro-mes clearfix" v-for="(good,goodIndex) in type.cartItems" :key="goodIndex">
                <legend-image :pic="good.pic" :isJD="result.prodSource == 'JD'"/>
              <!-- <div class="pro-img"><img :src="$imgUrlHead + good.pic" alt=""></div> -->
              <div class="pro-name">
                <a href="javascript:;" class="name">{{good.prodName}}</a>
                <div class="sku">{{good.cnProperties}}</div>
                <span class="price" :style="{'color': themes.color}">&#65509;<em class="now" :style="{'color': themes.color}">{{Money(good.promotionPrice)[0]}}</em>.{{Money(good.promotionPrice)[1]}}</span>
              </div>
              <div class="pro-num">×{{good.basketCount}}</div>
            </div>
          </div>
          <!--<div class="order-style add-sub bt" v-if="previousIfo.buyNow == true">-->
          <!--<span class="left">购买数量</span>-->
          <!--<span class="right">-->
          <!--<a href="#" class="sub-a sub-limit">-</a>-->
          <!--<input type="text" value="1" class="sub-input">-->
          <!--<a href="#" class="sub-a">+</a>-->
          <!--</span>-->
          <!--</div>-->
          <div class="order-style bt sub-click" @click="showTrans(shopIndex)">
            <span class="left">配送费用</span>
            <span class="right" v-if="!shop.currentSelectTransfee"><em class="right-em">快递免邮</em><i class="arr"><img src="../../assets/images/arrow.png" alt=""></i></span>
            <span class="right" v-if="shop.currentSelectTransfee"><em class="right-em">{{shop.currentSelectTransfee.desc}}</em><i class="arr"><img src="../../assets/images/arrow.png" alt=""></i></span>
          </div>
          <div class="order-style bt">
            <span class="left">买家留言</span>
            <span class="right words"><input type="text" v-model="shop.remark" placeholder="给卖家留言"></span>
          </div>
          <div class="order-style pro-price bt">
            <span class="right">小计：<span class="price">&#65509;<em class="now">{{Money(shop.shopTotalCash)[0]}}</em>.{{Money(shop.shopTotalCash)[1]}}</span></span>
          </div>
        </div>
        <div class="submit-con">
          <div class="order-style" @click="goInvoice" v-if="result.switchInvoice == 1">
            <span class="left">发票信息</span>
            <span class="right" v-if="result.defaultInvoice"><em class="right-em">普通发票（商品明细-{{result.defaultInvoice.company}}）</em><i class="arr"><img src="../../assets/images/arrow.png" alt=""></i></span>
            <span class="right" v-if="!result.defaultInvoice"><em class="right-em">不开发票</em><i class="arr"><img src="../../assets/images/arrow.png" alt=""></i></span>
          </div>
          <!--<div class="order-style bt">-->
          <!--<span class="left">使用积分<i class="use-score">可用积分1000，抵扣&#65509;10.00</i></span>-->
          <!--<div class="on-off"></div>-->
          <!--</div>-->
          <!--<div class="order-style bt">-->
          <!--<span class="left">使用积分<i class="use-score">可用积分1000，抵扣&#65509;10.00</i></span>-->
          <!--<div class="on-off on"></div>-->
          <!--</div>-->
          <!--<div class="order-style integral">-->
          <!--<span class="left">使用<input type="text" value="1000">积分，抵扣&#65509;10.00</span>-->
          <!--</div>-->
        </div>
        <div class="submit-con total">
          <div class="order-style">
            <span class="left">商品金额</span>
            <span class="right"><span class="price">&#65509;<em class="now">{{Money(result.orderTotalCash)[0]}}</em>.{{Money(result.orderTotalCash)[1]}}</span></span>
          </div>
          <!-- <div class="order-style">
            <span class="left">优惠金额</span>
            <span class="right"><span class="price">-&#65509;<em class="now">{{Money(result.allDiscount + result.couponOffPrice)[0]}}</em>.{{Money(result.allDiscount + result.couponOffPrice)[1]}}</span></span>
          </div> -->
          <!--<div class="order-style">-->
          <!--<span class="left">积分抵扣</span>-->
          <!--<span class="right"><span class="price">-&#65509;<em class="now">10</em>.00</span></span>-->
          <!--</div>-->
          <div class="order-style">
            <span class="left">配送费用</span>
            <span class="right"><span class="price">&#65509;<em class="now">{{Money(transfeePrice)[0]}}</em>.{{Money(transfeePrice)[1]}}</span></span>
          </div>
        </div>
      </div>
      <div class="submit-btn">
        <div class="total-price">合计：<span class="price">&#65509;<em class="now">{{Money(result.orderTotalCash + transfeePrice - result.allDiscount - result.couponOffPrice)[0]}}</em>.{{Money(result.orderTotalCash + transfeePrice - result.allDiscount - result.couponOffPrice)[1]}}</span></div>
        <a href="javascript:;" class="sub-btn" @click="subOrder">提交订单</a>
      </div>
    </div>
    <!-- /提交订单 -->
    <!-- 选择快递方式 -->
    <div class="popup-hide" :class="{show: showTransfeeDtos}">
      <div class="popup-box">
        <div class="popup-tit">
          <span class="tit">快递方式</span>
          <i class="close close-pop" @click="closeTraansfee"></i>
        </div>
        <div class="popup-con post-way">
          <div class="item" v-for="(item,index) in currentTransfeeDtos" :key="index" @click="choseTransprot(index)">
            <div class="item-txt">{{item.desc}}</div>
            <em class="choose" :class="{cur: item.checkSts}"></em>
          </div>
        </div>
        <button class="popup-btn" @click="closeTraansfee">关闭</button>
      </div>
    </div>
    <!-- /选择快递方式 -->
    <!-- 选择优惠券 -->
    <div class="popup-hide" :class="{show: showCoupon}">
      <div class="popup-box">
        <div class="popup-tit">
          <span class="tit">优惠券</span>
          <i class="close close-pop" @click="showCoupon = false"></i>
        </div>
        <div class="popup-con use-coupons">
          <div class="m-tabs">
            <a href="javascript:;" class="item" :class="{'line-on': uncanUseCouponTrue}" @click="uncanUseCouponTrue = true"><span class="txt">可用<em class="s-txt">（{{canUseCoupon.length ? canUseCoupon.length : 0}}）</em></span></a>
            <a href="javascript:;" class="item" :class="{'line-on': !uncanUseCouponTrue}" @click="uncanUseCouponTrue = false"><span class="txt">不可用</span></a>
          </div>
          <div>
            <div class="list-item" :class="{'red-got': (item.couponProvider == 'platform' && item.couponType == 'shop') || (item.couponProvider == 'platform' && item.couponType == 'common')}" v-if="uncanUseCouponTrue" v-for="(item,index) in canUseCoupon" :key="index" @click="changeCoupon(index,item.checkSts)">
              <div class="left">
                <div class="item-con">
                  <div class="des" v-if="item.couponProvider == 'platform' && item.couponType == 'shop'"><i class="coupon-style">店铺</i>{{item.couponName}}</div>
                  <div class="des" v-if="item.couponProvider == 'platform' && item.couponType == 'common'"><i class="coupon-style">平台</i>{{item.couponName}}</div>
                  <div class="des" v-if="item.couponProvider == 'shop' && item.couponType == 'common'"><i class="coupon-style">店铺</i>{{item.couponName}}</div>
                  <div class="des" v-if="item.couponProvider == 'shop' && item.couponType == 'product'"><i class="coupon-style">商品</i>{{item.couponName}}</div>
                  <div class="des" v-if="item.couponProvider == 'shop' && item.couponType == 'category'"><i class="coupon-style">品类</i>{{item.couponName}}</div>
                  <span class="num">&#65509;<span class="price">{{item.offPrice}}</span></span>
                </div>
                <div class="condition">满{{item.fullPrice}}元可用</div>
                <div class="use-time">使用日期：{{ item.getTime | dateformat('YYYY-MM-DD')}}-{{ item.endDate | dateformat('YYYY-MM-DD')}}</div>
              </div>
              <span class="choose" :class="{'cur':item.selectSts}"></span>
            </div>
          </div>
          <template v-if="!uncanUseCouponTrue">
            <div class="list-item not-use"  v-for="(item,index) in uncanUseCoupon">
            <div class="left">
              <div class="item-con">
                <i class="coupon-style" v-if="item.couponProvider == 'platform'">平台</i>
                <i class="coupon-style" v-if="item.couponProvider == 'shop' && item.couponType == 'common'">店铺</i>
                <i class="coupon-style" v-if="item.couponProvider == 'product' && item.couponType == 'common'">商品</i>
                <i class="coupon-style" v-if="item.couponProvider == 'category' && item.couponType == 'common'">品类</i>
                <span class="num">&#65509;<span class="price">{{item.offPrice}}</span></span>
              </div>
              <div class="condition">满{{item.fullPrice}}元可用</div>
              <div class="use-time">使用日期：{{ item.getTime | dateformat('YYYY-MM-DD')}}-{{ item.endDate | dateformat('YYYY-MM-DD')}}</div>
            </div>
            <span class="choose"></span>
          </div>
          </template>

        </div>
        <button class="popup-btn" @click="checkCoupon">完成</button>
      </div>
    </div>
    <!-- /选择优惠券 -->
    <!-- 取消支付 -->
    <div class="popup-hide">
      <div class="popup-small-box">
        <div class="cancel-pay">确认要取消支付吗？</div>
        <div class="s-btn">
          <button class="item lef">再想想</button>
          <button class="item rig">去意已决</button>
        </div>
      </div>
    </div>
    <!-- /取消支付 -->

    </div>
    <div style="height: 60px;"></div>
  </div>
</template>

<script>
  import { Swipe , SwipeItem  , NavBar } from "vant";
  import cash from 'utils/tool'
  import {mapState} from 'vuex'
  import { orderCouponsPageForApp } from "api/settlement";
  import { orderDetails , submitOrder } from "api/fight";
  import legendImage from "components/legendImage/legendImage";
  import { save } from "api/invoiceManage";
  export default {
    components: {
      NavBar,
      legendImage
    },
    data() {
      return {
         
        params: {    //获取订单详情的对象
          addrId: '',         //地址id
          addNumber: '',         //团编号
          activeId: '',         //活动id
          count: '',         //数量
          couponBack: '',         //是否使用优惠券,yes or no
          prodId: '',         //商品id
          skuId: '',         //skuId
          type: ''         //订单类型:NORMAL
        },
        previousIfo: JSON.parse(sessionStorage.getItem("orderIfo")),     //购物车传过来的值
        buyNow: JSON.parse(sessionStorage.getItem("orderIfo")),     //立即购买的值
        result: '',      //获取到的全部信息
        Money: cash,         //价格转换
        showTransfeeDtos: false,         //显示快递
        currentTransfeeDtos: [],            //当前的快递列表
        currShopIndex: '',            //选择快递的商家
        transfeePrice: 0,            //快递费
        showCoupon: false,           //显示选择优惠券
        canUseCoupon: [],           //可使用优惠券
        uncanUseCoupon: [],           //不可使用优惠券
        uncanUseCouponTrue: true,           //显示可用优惠券
        couponPrice: 0,           //优惠券优惠金额
        couponName: '',           //使用优惠券的名字
        userCouponId: '',           //使用优惠券的id
        opType: '',           //是否在使用优惠券
      };
    },

    watch: {

    },
    mounted() {
      let that = this

      let remarkArr
      if(sessionStorage.getItem("remarkArr")) {
        remarkArr = JSON.parse(sessionStorage.getItem("remarkArr"))
      }
      this.transfeePrice = 0
      if(sessionStorage.getItem("addrId")) {
        this.params.addrId = JSON.parse(sessionStorage.getItem("addrId"))
      }
      if(this.previousIfo){
        this.params.activeId = this.previousIfo.activeId
        this.params.addNumber = this.previousIfo.addNumber,
        this.params.prodId = this.previousIfo.prodId
        this.params.count = this.previousIfo.count
        this.params.skuId = this.previousIfo.skuId
        this.params.type = this.previousIfo.type
        this.params.couponBack = 'no'
      }
      if(sessionStorage.getItem('couponBack')) {
        this.params.couponBack = 'yes'
      }
      orderDetails(this.params).then( res => {
        if(res.status == 1) {
          this.result = res.result
          orderCouponsPageForApp({opType: '', userCouponId: ''}).then(res => {
            if(res.status == 1) {
              if (res.result.usableUserCouponList) {
                this.canUseCoupon = res.result.usableUserCouponList
              }

              if(this.result.appSelCouponDto) {
                this.couponPrice = this.result.couponOffPrice
                this.couponName = this.result.appSelCouponDto.couponName
                if(res.result.usableUserCouponList) {
                  for(var i = 0 ;i< res.result.usableUserCouponList.length ; i++) {
                    this.canUseCoupon[i]['checkSts'] = false
                    if(this.canUseCoupon[i].userCouponId == this.result.appSelCouponDto.userCouponId) {
                      this.canUseCoupon[i]['checkSts'] = true
                    }
                  }
                }
              }
              if (res.result.disableUserCouponList) {
                this.uncanUseCoupon = res.result.disableUserCouponList
              }

            }
          })
          for(var i = 0; i< this.result.shopCarts.length; i++) {
            if(remarkArr) {
              this.result.shopCarts[i].remark = remarkArr[i]
            }
            if(this.result.shopCarts[i].transfeeDtos) {
              this.transfeePrice = this.transfeePrice + this.result.shopCarts[i].currentSelectTransfee.deliveryAmount
              for(var j = 0 ; j< this.result.shopCarts[i].transfeeDtos.length ; j++) {
                this.result.shopCarts[i].transfeeDtos[j]['checkSts'] = false
                this.result.shopCarts[i].transfeeDtos[0]['checkSts'] = true
              }
            }
          }
        }
      })
    },
    methods: {
      //返回
      goback() {
        sessionStorage.removeItem("addrId")
        sessionStorage.removeItem("orderIfo")
        sessionStorage.removeItem("remarkArr")
        sessionStorage.removeItem("couponBack")
        this.$router.back();
        this.$router.isBack = true
      },
      //选择配送方式窗口弹出
      showTrans(index) {
        if (this.result.shopCarts[index].transfeeDtos) {
          this.showTransfeeDtos = true
          this.currShopIndex = index
          this.currentTransfeeDtos = this.result.shopCarts[index].transfeeDtos
        }
      },
      //去选择发票
      goInvoice() {
        let remarkArr = []
        for(let i = 0; i< this.result.shopCarts.length; i++) {
          remarkArr.push(this.result.shopCarts[i].remark)
        }
        sessionStorage.setItem("remarkArr",JSON.stringify(remarkArr))
        if(this.result.defaultInvoice) {
          this.$router.push({
            path: `/invoice`,
            query: {
              invoiceType: this.result.defaultInvoice.titleId
            }
          })
        }else {
          this.$router.push({
            path: `/invoice`,
            query: {
              invoiceType: ''
            }
          })
        }
      },
      //选择配送方式
      choseTransprot(index) {
        this.result.shopCarts[this.currShopIndex].currentSelectTransfee = this.result.shopCarts[this.currShopIndex].transfeeDtos[index]
        for(var i = 0; i < this.result.shopCarts[this.currShopIndex].transfeeDtos.length ; i++) {
          this.result.shopCarts[this.currShopIndex].transfeeDtos[i].checkSts = false
          this.result.shopCarts[this.currShopIndex].transfeeDtos[index].checkSts = true
        }
        this.transfeePrice = 0
        for(var i = 0; i< this.result.shopCarts.length; i++) {
          if(this.result.shopCarts[i].transfeeDtos) {
            this.transfeePrice = this.transfeePrice + this.result.shopCarts[i].currentSelectTransfee.deliveryAmount
            for(var j = 0 ; j< this.result.shopCarts[i].transfeeDtos.length ; j++) {
            }
          }
        }
      },
      //获取优惠券
      changeShowCoupon() {
        this.showCoupon = true
      },
      //改变优惠券
      checkCoupon() {
        let remarkArr
        if(sessionStorage.getItem("remarkArr")) {
          remarkArr = JSON.parse(sessionStorage.getItem("remarkArr"))
        }
        this.transfeePrice = 0
        if(sessionStorage.getItem("addrId")) {
          this.params.addrId = JSON.parse(sessionStorage.getItem("addrId"))
        }
        this.params.couponBack = 'yes'
        sessionStorage.setItem('couponBack','yes'); // 存入一个值
        orderDetails(this.params).then( res => {
          if(res.status == 1) {
            this.result = res.result
            this.showCoupon = false
            for(var i = 0; i< this.result.shopCarts.length; i++) {
              if(remarkArr) {
                this.result.shopCarts[i].remark = remarkArr[i]
              }
              if(this.result.shopCarts[i].transfeeDtos) {
                this.transfeePrice = this.transfeePrice + this.result.shopCarts[i].currentSelectTransfee.deliveryAmount
                for(var j = 0 ; j< this.result.shopCarts[i].transfeeDtos.length ; j++) {
                  this.result.shopCarts[i].transfeeDtos[j]['checkSts'] = false
                  this.result.shopCarts[i].transfeeDtos[0]['checkSts'] = true
                }
              }
            }
          }
        })
      },
      //去切换地址
      goAddress() {
        let remarkArr = []
        for(let i = 0; i< this.result.shopCarts.length; i++) {
          remarkArr.push(this.result.shopCarts[i].remark)
        }
        sessionStorage.setItem("remarkArr",JSON.stringify(remarkArr))
        this.$router.push({
          path: `/addressList`,
          query: {
            changeAddress: 1
          }
        })
      },
      //关闭配送方法选择
      closeTraansfee() {
        this.showTransfeeDtos = false
      },
      //选择优惠券
      changeCoupon(index,checkSts) {
        if(this.canUseCoupon[index].selectSts) {
          this.userCouponId = this.canUseCoupon[index].userCouponId
          this.opType = 'remove'
        }else {
          this.couponPrice = this.canUseCoupon[index].offPrice
          this.userCouponId = this.canUseCoupon[index].userCouponId
          this.opType = 'add'
        }
        orderCouponsPageForApp({opType: this.opType, userCouponId: this.userCouponId}).then(res => {
          if(res.status == 1) {
            this.canUseCoupon = res.result.usableUserCouponList
            this.uncanUseCoupon = res.result.disableUserCouponList
          }
        })
      },
      //提交订单
      subOrder() {
        const toast1 = this.$toast.loading({
          mask: true,
          message: '加载中...'
        });
        let params = {
          activeId: this.previousIfo.activeId,      //活动id
          basketStr: '',      //basket str
          couponStr: '',      //优惠券字符串
          delivery: '',      //配送方式
          invoiceId: '',      //发票id
          payManner: 2,      //支付方式  在线or货到
          payTypeId: '',      //支付类型ID
          remarkText: '',      //订单备注. shopId:备注
          switchInvoice: '',      //当前商品所属商家是否开启发票 1：开启 0：关闭
          token: this.result.token,      //token， 防止重复提交
          type: 'MERGE_GROUP',      //订单类型
        }
        let remarkTextList
        let deliveryList
        let regRule = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g;
        for(var i = 0 ;i <this.result.shopCarts.length ; i++) {
          if(this.result.shopCarts[i].currentSelectTransfee) {
            deliveryList = deliveryList + ';' + this.result.shopCarts[i].shopId + ':' + this.result.shopCarts[i].currentSelectTransfee.freightMode
          }
          if(!this.result.shopCarts[i].remark) {
            this.result.shopCarts[i].remark = ' '
          }
          remarkTextList = remarkTextList + ';' + this.result.shopCarts[i].shopId + ':' + this.result.shopCarts[i].remark
        }
        if(remarkTextList.match(regRule)) {
          this.$toast('买家留言不支持表情')
          return
        }
        if(!this.result.userAddress) {
          toast1.clear();
          this.$toast('收货地址为空，请先填写收货地址')
          return
        }
        if(this.canUseCoupon) {
          for(var k = 0 ;k <this.canUseCoupon.length ; k++) {
            if(this.canUseCoupon.checkSts) {

            }
          }
        }
        if(deliveryList) {
          params.delivery = deliveryList.substr(10)
        }
        if(remarkTextList) {
          params.remarkText = remarkTextList.substr(10)
        }
        if(this.result.switchInvoice == 1) {
          if(this.result.defaultInvoice) {
            params.invoiceId = this.result.defaultInvoice.id
          }
        }

        for (let i = 0; i < this.result.shopCarts.length; i++) {
          for (let j = 0; j < this.result.shopCarts[i].groupCartItems.length; j++) {
            if (this.result.shopCarts[i].groupCartItems[j].cartItems) {
              for (let k = 0; k < this.result.shopCarts[i].groupCartItems[j].cartItems.length; k++) {
                if (this.result.shopCarts[i].groupCartItems[j].cartItems[k].stocks == -1  ) {
                  toast1.clear()
                  this.$toast('某商品区域限售')
                  return
                } else if(this.result.shopCarts[i].groupCartItems[j].cartItems[k].stocks == 0  ) {
                  toast1.clear()
                  this.$toast('某商品库存不足')
                  return
                }
              }
            }
          }
        }

        submitOrder(params).then(res => {
          if(res.status == 1) {
            if(this.result.defaultInvoice) {
              let invoiceList = {
                commonInvoice: 1,          //默认使用,1为默认
                company: '',          //发票抬头
                contentId: 1,          //发票内容,1为不开发票，2为明细
                invoiceHumNumber: '',          //纳税人号
                titleId: 1,          //发票标题，1为个人，2为单位
                typeId: 1,          //发票类型，1为普通发票
              }
              save(invoiceList).then(res => {
                if(res.status == 1) {

                }else {
                  this.$toast(res.msg)
                }
              })
            }
            var payData = JSON.stringify(res.result)
            sessionStorage.removeItem("addrId")
            sessionStorage.removeItem("orderIfo")
            sessionStorage.removeItem("remarkArr")
            sessionStorage.removeItem("couponBack")
            this.$router.replace({
              path: `/payOrder`,
              query: {
                subNumber: res.result.subNumber,
                totalAmount: res.result.totalAmount,
              }
            });
          }else {
            this.$toast(res.msg)
          }
        })
      },
    },
    computed: {
      ...mapState(['themes']),
    },
    computed: {

    }
  };
</script>


<style scoped>
  @import "../../assets/css/style/submit-order-style.css";
  @import "../../assets/css/style/popup-style.css";
  @import "../../assets/css/popup.css";
  @import "../../assets/css/submit-order.css";
  .pro-name {
    width: 75%;
  }
</style>
